<template>
  <div class="app-container home">
    <el-row :gutter="24">
      <el-col :sm="8" :lg="8" style="padding-left: 20px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div class="text-center">
              <userAvatar :user="user" />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="user" />用户名称
                <div class="pull-right">{{ user.nickName }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="peoples" />所属角色
                <div class="pull-right">{{ roleGroup }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" />创建日期
                <div class="pull-right">{{ user.createTime }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>

      <el-col :sm="16" :lg="16" style="padding-left: 50px">
        <el-table
          v-loading="loading"
          :data="messageList"
          height="320"
          style="overflow: hidden"
        >
          <el-table-column label="公告" prop="messageName">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleView(scope.row)"
                style="color: black; font-size: 100%"
                >{{ scope.row.messageName }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="" align="center" prop="addTime" width="180" >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.addTime, '{y}-{m}-{d}')}}</span>
        </template>
      </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-divider />
    <el-scrollbar style="height:100%">
    <!-- 查看详情 -->
    <el-dialog
      :title="form.messageName"
      :visible.sync="openView"
      width="700px"
      append-to-body
      style="text-align: center"
      :show-close="false"
    >
      <el-form ref="form" :model="form" label-width="120px" size="mini">
        <el-row>
          <el-col :span="24" style="text-align: center">
            <p style="text-indent: 40px;white-space: pre-line;">{{ form.messageContent }}</p>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openView = false">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 我要投诉 -->
    <el-row>
      <el-col
        :sm="16"
        :lg="24"
        style="background-color: rgb(248, 248, 249); color: black"
      >
        <span style="text-align: left; text-indent: 40px"
          ><h3>我的投诉</h3></span
        >
        <el-table
          v-loading="loading"
          :data="complainList"
          height="250"
          :show-header="false"
          style="color: black"
        >
          <el-table-column
            label="投诉标题"
            align="center"
            prop="complainTitle"
          />
          <el-table-column
            label="是否匿名"
            align="center"
            width="120"
            prop="anonymous"
          >
            <template slot-scope="scope">
              {{ scope.row.anonymous == "1" ? "匿名投诉" : "非匿名投诉" }}
            </template>
          </el-table-column>
          <el-table-column label="回复内容" align="center" prop="replyContent">
            <template slot-scope="scope">
              {{ scope.row.replyContent == null ? "未受理" : "已受理" }}
            </template>
          </el-table-column>
          <el-table-column
            label="投诉时间"
            align="center"
            prop="complainTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.complainTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-divider />
    <!-- 我要咨询 -->
    <el-row>
      <el-col
        :sm="16"
        :lg="24"
        style="background-color: rgb(248, 248, 249); color: black"
      >
        <span style="text-align: left; text-indent: 40px"
          ><h3>我的咨询</h3></span
        >
        <el-table
          v-loading="loading"
          :data="adviceList"
          height="250"
          :show-header="false"
          style="color: black"
        >
          <el-table-column
            label="咨询公司"
            align="center"
            prop="companyName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="咨询内容"
            align="center"
            prop="adviceContent"
          />
          <el-table-column label="回复内容" align="center" prop="replyContent">
            <template slot-scope="scope">
              {{ scope.row.replyContent == null ? "未受理" : "已受理" }}
            </template>
          </el-table-column>
          <el-table-column
            label="回复时间"
            align="center"
            prop="replyTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.replyTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-scrollbar>
  </div>
</template>

<script>
import userAvatar from "./system/user/profile/userAvatar.vue";
import { messageList, getMessage } from "@/api/system/message";
import { complainList } from "@/api/system/complain";
import { adviceList } from "@/api/system/advice";
import { getUserProfile } from "@/api/system/user";
export default {
  name: "Index",
  components: { userAvatar },
  data() {
    return {
      // 表单参数
      form: {},
      // 是否显示详细弹出层
      openView: false,
      // 遮罩层
      loading: true,
      // 信息发布表格数据
      messageList: [],
      //投诉受理数据列表
      complainList: [],
      //纳税咨询数据列表
      adviceList: [],
      user: {},
      roleGroup: {},
      postGroup: {},
    };
  },
  created() {
    this.getList();
    this.getComplainList();
    this.getAdviceList();
    this.getUser();
  },
  activated(){this.getList();
    this.getComplainList();
    this.getAdviceList();},
  methods: {
    getUser() {
      getUserProfile().then((response) => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    /** 任务详细信息 */
    handleView(row) {
      getMessage(row.messageId).then((response) => {
        this.form = response.data;
        this.openView = true;
      });
    },
    /** 查询信息发布列表 */
    getList() {
      this.loading = true;
      messageList().then((response) => {
        this.messageList = response.rows;
        this.loading = false;
      });
    },
    /** 投诉受理列表*/
    getComplainList() {
      this.loading = true;
      complainList().then((response) => {
        this.complainList = response.rows;
        this.loading = false;
      });
    },
    /** 纳税咨询列表*/
    getAdviceList() {
      this.loading = true;
      adviceList().then((response) => {
        this.adviceList = response.rows;
        this.loading = false;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
  .el-table--scrollable-y ::-webkit-scrollbar {
    display:none
  }
  .el-scrollbar__thumb { display: none; } .el-scrollbar__wrap { overflow-x: hidden; overflow-y: auto; }
}
</style>

